<template>
	<view>
		<view class="cu-form-group" v-for="(item,index) in inputValue" :key="index">
			<view class="title">第{{index+1}}行</view>
			<input :value="item.join(',')" @input="inputChange" :id="index" placeholder="用英文逗号隔开宽度数组" name="input"></input>
			<text class='cuIcon-add text-green' @tap="addRow(index)"></text>
			<text class='margin-left cuIcon-roundclose text-orange' @tap="deleteRow(index)"></text>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		props:{
			value:{
				type:Array,
				default:[[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1]]
			}
		},
		data() {
			return {
				inputValue:[]
			};
		},
		watch: {
			value(val) {
				this.inputValue = val;
			},
			inputValue(newVal, oldVal) {
				//if (newVal !== oldVal) {
					//console.log(newVal);
				this.$emit("input", newVal);
				//}
			}
		},
		created() {
			this.inputValue = this.value;
		},
		methods:{
			inputChange(e){
				let index=parseInt(e.currentTarget.id);
				let value=e.detail.value.split(',')
				try{
					for(let i=0;i<value.length;i++){
						if(value[i]>0)
							value[i]=parseInt(value[i]);
					};
					Vue.set(this.inputValue, index, value);
				}catch{
					
				}
			},
			addRow(index){
				this.inputValue.splice(index,0,this.inputValue[index]);
			},
			deleteRow(index){
				this.inputValue.splice(index,1);
			}
		}
	}
</script>

<style lang="scss">

</style>
